<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地震局培训平台</title>
		<!--<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />-->
		<link rel="stylesheet" href="style/main.css" />
		<link rel="stylesheet" href="style/video.css" />
	</head>

	<body>
		<div id="show">
			<div id="content">
				<div id="videobox">
					<div class="title">地震知识课堂(第10课)</div>
					<div class="videobox">
						<video id="video" src="video/mov_bbb.mp4"></video>
						<div class="btnbox">
							<div class="time">0:0</div>
							<div class="progress">
								<div class="progress-bar"></div>
							</div>
							<div class="volumn in"></div>
							<div class="download"><a href="video/mov_bbb.mp4" download="bbb"></a></div>
							<div class="full"></div>
						</div>
					</div>
					<div class="chatroom">
						<div class="roomname">咨询聊天室</div>
						<div class="sendbox">
							<input class="sendinfo" />
							<div class="sendbtn">发送</div>
						</div>
						<div class="messagebox">
							<div class="infobox">
								<div class="head"></div>
								<div class="box">
									<div class="name">管理员</div>
									<div class="text">这是录播大家可以循环观看</div>
								</div>
							</div>
							<div class="infobox in">
								<div class="box">
									<!--<div class="name">管理员</div>-->
									<div class="text">这是录播大家可以循环观看</div>
								</div>
								<div class="head"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script type="text/javascript" src="script/jquery.min.js"></script>
			<script type="text/javascript" src="script/ishoock.tools.js"></script>
			<script type="text/javascript" src="script/main.js"></script>
			<script>
				var video = $("#video")[0];
				var v_length=0;
				var bar_length=0;
				$(function() {
					$("#video").on("click", function() {
						if($("#video").hasClass("in")){
							$("#video").removeIn();
							video.pause();
						}else{
							video.play();
							$("#video").in();
							v_length=video.duration;
						}
					});
					video.addEventListener("timeupdate", function() {
						
						var time =Math.floor(video.currentTime);
						$(".progress-bar").css("width",video.currentTime/v_length*460+"px");
						time =getTime(time);
						$(".videobox .btnbox .time").html(time);
					});
					
					//点击声音
					$(".btnbox .volumn").on("click",function(){
						if($(this).hasClass("in")){
							video.volume=0;
							$(this).removeIn();
						}else{
							video.volume=1;
							$(this).in();
						}
						console.log(video.volume);
					});
				});

				function getTime(time) {
					var minute=parseInt(time/60);
					var second=time%60;
					return minute+":"+second;
				}
			</script>
	</body>

</html>